<template>
	<view class="body">
		<block v-if="isok">
			<scroll-view @scroll="scroll" class="scroll-view" scroll-y="true" refresher-enabled="true"
			  :refresher-triggered="triggered"  
				@refresherrefresh="pulldown" @scrolltolower="scrolltolower" >
	
				<view class="backBox"></view>
				<!-- 胶囊 -->
				<view class="jn" :style="{background:scrollJudge?'white':'transparent'} ">
					<view class="top" :style="{height:top+'px'}"></view>
					<!-- nav -->
					<view class="nav" :style="{height:Jnheight+statusBarHeights+'px'}">
						<view class="headerBox"
							:style="{background:scrollJudge?'white':'transparent'}">
							<view class="titleBoxh">
								<view class="title">禹冰之家</view>
								<view class="tips">防水协会监督.质量100%保证</view>
							</view>
							<view class="wxBox" :style="{height:Jnheight+statusBarHeights + 'px'}"></view>
						</view>
					</view>
				</view>
				<Search></Search>
				<Typelist @isactivefun="changeactive"></Typelist>
				<Swiper></Swiper>
				<Contenlist ref="content"  @triggeredfun="triggeredfun"></Contenlist>
		
			
			</scroll-view>
		</block>
		<block v-else>
			<gjphome></gjphome>
		</block>
	</view>
</template>

<script setup>
	import {reactive,ref,getCurrentInstance} from 'vue'
	import {onLoad} from "@dcloudio/uni-app"
	import {storeToRefs} from "pinia";//结构才需要引入
	import {useNavStore} from '@/store/index.js'//引入空间
	const navStore = useNavStore()//给空间命名
	const { statusBarHeights,top,Jnheight} = storeToRefs(navStore);//解构数据
	const {proxy} = getCurrentInstance()
	import Typelist from './typelist.vue'
	import Swiper from './swiper.vue'
	import Contenlist from './contentlist.vue'
  import Search from './search.vue'
	
	const isok = ref(true)
	const triggered = ref(false)
	
	onLoad(()=>{
		
	})
	const emits = defineEmits(["isactivefun"])
	const isactivefun = (e) => {
			emits("isactivefun",1)
	} 
	const changeactive=()=>{
		isactivefun()
	}
	const scrollJudge=ref(false)
	const scroll=(e)=>{
		if(e.detail.scrollTop>100){
			scrollJudge.value = true
		}else {
			scrollJudge.value = false
		}
	}
	const content = ref(null)
	// 下拉刷新
	const pulldown=()=>{
		triggered.value=true
		content.value.pulldown()
	}
	//上拉加载
	const scrolltolower=()=>{
		content.value.scrolltolower()
	}
	const triggeredfun=()=>{
		triggered.value = false
	}

</script>

<style lang="scss">
	page{
		overflow: hidden;
	}
	.jn{
		transition: all 0.5s;
		position: sticky;
		top: 0;
		z-index: 1000;
		
	}
	.top{
		display: flex;align-items: center;justify-content: space-between;
	}
	.nav{
		width: 750rpx;display: flex;align-items: center;justify-content: space-between;
		
	}
	.scroll-view{
		height: 100vh;width: 750rpx;background-color: #f8f8f8;
	}
	.buttonkf {
		border: none !important;
		background-color: white !important;
		padding: 0 !important;
		line-height: normal !important;
		margin: 0 !important;
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
	
	}
	
	.buttonkf::after {
		border: none !important;
	}
	.body {
		background-color: $MainBackColor;
		min-height: 100vh;
	}

	

	.backBox {
		background: linear-gradient(180deg, rgba(116, 190, 255, 0.2) 0%, rgba(116, 190, 255, 0.1) 57%, rgba(252, 223, 79, 0) 94%);
		width: 100vw;
		height: 18vh;
		position: absolute;
		top: 0;
		// filter: blur(80px);
		
	}

	

	
 
	.headerBox {
		transition: all 0.5s;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		
		position: sticky;
		top: 0;
		z-index: +1000;

		.titleBoxh {
			display: flex;
			justify-content: start;
			align-items: flex-end;

			.title {
				font-weight: bold;
				font-family: '禹冰之家';
				font-size: 36rpx;
				
				color: black;
			}

			.tips {
				color: black;
				font-size: 26rpx;
				margin-left: 5px;
				font-weight: bold;
				color: #51a0fd;
				font-style: italic;
			}
		}

		.wxBox {
			width: 100rpx;
			height: 0px;
		}
	}

	

	.main {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		align-items: center;
		padding: 20px;
		

		.actBox {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.img {
				width: 40px;
				height: 40px;
			}

			.name {
				text-align: center;
				margin-top: 5px;
				font-size: 14px;
			}
		}
	}


		/* 热门服务 更多推荐 */
		@font-face {
			font-family: "阿里妈妈数黑体";
			font-weight: 700;
			src: url("//at.alicdn.com/wf/webfont/Z6NGK12PNmYL/vi2HMpU84WsS.woff2") format("woff2"),
				url("//at.alicdn.com/wf/webfont/Z6NGK12PNmYL/A1q9OzY8xXFz.woff") format("woff");
			font-display: swap;
		}

	.titleBox {
		padding: 10px 20px;
		font-weight: bold;
		font-family: '阿里妈妈数黑体';
		font-size: 16px;
	}
</style>
